<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>问卷调查系统</title>
    <link rel="stylesheet" href="css/init.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/write.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <script src="js/common/util.js"></script>
    <script>
        let questionId = getQueryVariable("id");
        let questionnaires = getDataFromLocal("questionnaires");
        let questionnaire = questionnaires[questionId - 1];
        if (questionId === undefined) {
            location.href = "index.html";
        }
    </script>
</head>

<body>
    <!-- 标题 -->
    <div class="title-box">
        <div class="questionnaire-title">
            <h3 id="questionnaire-title">666666</h3>
        </div>
    </div>

    <!-- 主体 -->
    <div id="main">
        <div class="container clear">
            <div class="container-box">
                <!-- 问题列表 -->
                <ul id="questions-list" class="questionnaire-list">

                </ul>
                <!-- 提示 -->
                <div class="questions-tips">
                    <p>注：带<span class="question-necessary"> * </span>的选项为必填项</p>
                </div>
                <div class="operations-box">
                    <button id="btn-submit" class="btn btn-normal">
                        <i class="iconfont icon-fabu"></i>
                        确认提交</button>
                </div>
            </div>
        </div>
    </div>

    <div id="bg-top-left"></div>
    <div id="bg-top-right"></div>
    <div id="bg-bottom-left"></div>
    <div id="bg-bottom-right"></div>

    <!-- 单选 -->
    <template id="template-radio">
        <li class="question">
            <div class="question-title">
                <span class="question-necessary">*</span>
                <span class="question-number">{id}.</span>
                <span class="question-type">
                    <i class="iconfont icon-danxuankuangxuanzhong"></i>
                    单选题：
                </span>
                <span>{title}</span>
            </div>
            <ul class="question-items">
                {items}
            </ul>
        </li>
    </template>

    <template id="template-radio-item">
        <li data-id="{id}">
            <input type="radio" name="question{id}" id="question{id}-item{radioItemID}" data-type="radio"
                data-id="{radioItemID}" class="option">
            <label for="question{id}-item{radioItemID}">{content}</label>
        </li>

    </template>

    <!-- 多选 -->
    <template id="template-checkbox">
        <li class="question">
            <div class="question-title">
                <span class="question-necessary">*</span>
                <span class="question-number">{id}.</span>
                <span class="question-type">
                    <i class="iconfont icon-xuanzhong"></i>
                    多选题：
                </span>
                <span>{title}</span>
            </div>
            <ul class="question-items">
                {items}
            </ul>
        </li>
    </template>

    <template id="template-checkbox-item">
        <li data-id="{id}">
            <input type="checkbox" name="question{id}" id="question{id}-item{checkboxItemID}" data-type="checkbox"
                data-id="{checkboxItemID}" class="option">
            <label for="question{id}-item{checkboxItemID}">{content}</label>
        </li>
    </template>

    <template id="template-text">
        <li class="question" data-id="{id}">
            <div class="question-title">
                <!-- {isNecessary}判断是否是必填 -->
                <span class="question-{isNecessary}">*</span>
                <span class="question-number">{id}.</span>
                <span class="question-type">
                    <i class="iconfont icon-wenbenkuang"></i>
                    简答题：
                </span>
                <span>{title}</span>
            </div>
            <textarea name="question3" class="question-textInput" data-type="text"></textarea>
        </li>
    </template>

    <!-- 点击提交弹框 -->
    <div id="message-box" class="message-box"></div>
    <!-- 阴影背景 -->
    <div id="layer-mask"></div>

    <!-- 提交确认弹框 -->
    <div id="confirm-box" class="confirm-box">
        <a id="close-confirm" class="btn-close"><i class="iconfont icon-close"></i></a>
        <div id="confirm-content" class="confirm-content"></div>
        <div class="confirm-btn-box">
            <button id="btn-confirm" class="btn btn-normal">确定</button>
            <button id="btn-cancel" class="btn btn-cancel">取消</button>
        </div>
    </div>

    <script src="js/write/write.js"></script>
</body>

</html>
